import React, { Component } from 'react'
import Title from "../../components/title/Title"
import img11 from "../../assets/img/home/Mine11.png";
import img8 from "../../assets/img/home/Mine8.png";
import {connect} from "react-redux";
import {getBanner,actions} from "../../store/modules/mine";
import {getInfo} from "../../store/modules/login";
import { Carousel } from 'antd-mobile';
import {bindActionCreators} from "redux";
import "./mine.css"
 class Mine extends Component {
    componentDidMount(){
        let {mine:{reqBanner}} =this.props;
        reqBanner();
    }
    render() {
        let {banner,info,history} = this.props;

        return (
            <div>
                <Title title="我的"></Title>
                <div className="page">

                    <div className="photo clearfix">
                        <div className="left fl">
                            <div><img src={img8} alt="pic" /></div>
                           
                        </div>
                    </div>

                    <div className="content">
                        <ul>
                            <li>
                                <h2>12</h2>
                                <p><a href="#">我的收藏</a></p>
                            </li>
                            <li>
                                <h2>12</h2>
                                <p><a href="#">浏览记录</a></p>
                            </li>
                            <li>
                                <h2>&yen;0</h2>
                                <p><a href="#">我的红包</a></p>
                            </li>
                            <li >
                                <h2>12</h2>
                                <p><i >优惠券</i></p>
                            </li>
                        </ul>
                    </div>

                    <div className="navbar">
                        <div className="txt">
                            <div className="top">
                                <h2>我的订单</h2>
                                <p><a href="#">全部订单</a><i className="iconfont"> &#xe61f;
                                </i></p>
                            </div>
                            <ul className="bot">
                                <li>
                                    <img src={img11} alt="pic" />
                                    <p>待付款</p>
                                </li>
                                <li>
                                    <img src={img11} alt="pic" />
                                    <p>待收货</p>
                                </li>
                                <li>
                                    <img src={img11} alt="pic" />
                                    <p>评价</p>
                                </li>
                                <li>
                                    <img src={img11} alt="pic" />
                                    <p>售后/退款</p>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div className="bannerMine">
                        <Carousel
                        autoplay={true}
                        infinite={true}
                        autoplayInterval="3000"
                    >
                        {banner.map(val => (
                            <img
                                key={val.id}
                                src={val.img}
                                style={{ width: '100%', height: '1.5rem' }}
                            />
                        ))}
                    </Carousel>
                    </div>
                    <div className="bgc"></div>
                </div>
            </div>

        )
    }
}
//状态
let mapStateToProps=(state)=>({
    banner:getBanner(state),
    info:getInfo(state)
});
//方法
let mapDispatchToProps=(dispatch)=>({
    mine:bindActionCreators(actions,dispatch)
});
export default connect(mapStateToProps,mapDispatchToProps)(Mine)